<template>
        <div class="goodsEntry">
          <!-- <div>库存统计表</div> -->
          <el-form :inline="true" style="padding: 20px">
              <el-form-item label="扫码录入日期：">
                  <el-date-picker
                    value-format="yyyy-MM-dd HH:mm:ss"
                    :clearable="false"
                    v-model="endtime"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changeTime">
                  </el-date-picker>
              </el-form-item>
              <el-form-item label="关键字搜索：">
              <el-input style="width: 300px;" v-model="queryData.goodsName" placeholder="请输入商品ID,商品名称" size="medium"></el-input>
                
              </el-form-item>
              <el-form-item label="商品分类：">
                  <el-select v-model="categoryvalue" size="medium" @change="changecatey">
                      <el-option :value="item.value" :label="item.label" v-for="item in category" :key="item.index"></el-option>
                    </el-select>
                  <el-select v-model="queryData.goodsKindSecond" size="medium">
                    <el-option :value="item.id" :label="item.name" v-for="item in goodsKindSecond" :key="item.index"></el-option>
                  </el-select>
                  
              </el-form-item>
             
              <el-form-item label="仓库">
                  <el-select v-model="queryData.storeId" size="medium" @change="changecatey">
                      <el-option :value="item.id" :label="item.cellName" v-for="item in selectedOptions" :key="item.index"></el-option>
                    </el-select>
              </el-form-item>
              <el-form-item label="">
                  <el-button type="primary" size="medium" @click="query">查询</el-button>
                  <el-button type="primary" size="medium" @click="exportData">导出</el-button> 
              </el-form-item>
              <el-form-item label="">
                  <el-button type="primary" size="medium" @click="sales">查看窖藏明细</el-button>
                 
              </el-form-item>
          </el-form>

             
            <!-- <el-col :span="3" class="goods-category">商品种类：
              <span @click="showCateDialog">2种</span>
            </el-col>
            <el-col :span="3" class="goods-count"> 商品总量：6 </el-col> -->
            <!-- <el-col :span="6" class="goods-id">
              <span>12122312121212231212</span>
              <el-button type="primary" size="small">录入新商品</el-button>
            </el-col> -->
          
      
          <div class="wrapper">
            <el-table class="table" :data="tableData" stripe highlight-current-row border  @selection-change="handleSelectionChange">
             
              <el-table-column
              type="index"
              width="50">
            </el-table-column>
              
              <el-table-column align="center" prop="goods_no" label="商品编码">
              </el-table-column>
              <el-table-column align="center" prop="goods_name" label="商品名称">
              </el-table-column>
              <el-table-column align="center" prop="skuNo" label="SKU编码">
                <template slot-scope="scope">
                    <div style="color:#0033ff;" @click="sukData(scope.row)">{{scope.row.skuNo}}</div>
                </template>
              </el-table-column>
             </el-table-column>
              <el-table-column align="center" prop="inPcs" label="入库总量">
                <template slot-scope="scope">
                    <div style="color:#0033ff;" @click="Warehousing(scope.row)">{{scope.row.inPcs}}</div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="outPcs" label="出库总量">
                  <template slot-scope="scope">
                      <div style="color:#0033ff;" @click="outTreasury(scope.row)">{{scope.row.outPcs}}</div>
                  </template>
              </el-table-column>
              <!-- <el-table-column align="center" prop="icsPcs" label="冻结库存量">
                <template slot-scope="scope">
                  <div style="color:#0033ff;" @click="frozen(scope.row)">{{scope.row.icsPcs}}</div>
                </template>
              </el-table-column> -->
              <!-- <el-table-column align="center" prop="canSalePcs" label="酒藏库存">
                  <template slot-scope="scope">
                      <div style="color:#0033ff;" @click="sales(scope.row)">{{scope.row.canSalePcs}}</div>
                    </template>
              </el-table-column> -->
              <!-- <el-table-column align="center" prop="address" label="操作" width="150">
                <template slot-scope="scope">
                   
                 
                </template>
              </el-table-column> -->
            </el-table>
            <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current"
              @current-change="handleCurrentChange">
            </el-pagination>
          </div>
          <el-dialog title="商品种类" :visible.sync="goodsCates.show" class="goods-dialog">
            <el-table class="dialog-table" :data="goodsCates.tableData" stripe highlight-current-row border >
             
              <el-table-column align="center" prop="goodsName" label="商品名称">
              </el-table-column>
            <el-table-column align="center" prop="goodKindFirst" label="商品类别">
              </el-table-column>
              <el-table-column align="center" prop="odorType" label="香型">
              </el-table-column>
              <el-table-column align="center" prop="netContent" label="净含量">
              </el-table-column>
              <el-table-column align="center" prop="unit" label="单位">
              </el-table-column>
              <el-table-column align="center" prop="alocohl" label="酒精度">
              </el-table-column>
             
            </el-table>
          </el-dialog>
        </div>
      </template>
      
      <script>
        export default {
          data() {
            return {
              height: "auto",
              queryData: {
                startTime:'',
                endTime:'',
                goodsId:'',
                goodsKindSecond:'',
                storeId:'',
                goodsName:''
              },
              categoryvalue:'',
              category:[],
              selectedOptions:[],//仓库
              goodsKindSecond:[],
              goodsCates: {
                show: false,
                tableData: [{}]
              },
              tableData: [{
                goods_id:'1',
                names:'2'
              }],
              
              endtime:'',
              page: {
                pageSize: 10,
                current: 1,
                total: 100
              }
            };
          },
          mounted () {
            this.tableList();
            this.categoryList();
            this.area();
          },
          methods: {
            //初始化数据
            async tableList() {
              try {
                // console.log(333)
                // console.log(this.$post)
                
                  let { data } = await this.$post({
                    api: "/show/cellarpcs",
                    data:{
                      current:this.page.current,
                      pageSize:this.page.pageSize,
                      startTime:this.queryData.startTime,
                      endTime:this.queryData.endTime,
                      goodsName:this.queryData.goodsName,
                      cellarId:this.queryData.storeId,
                      goodsKindSecond:this.queryData.goodsKindSecond,
                      status:''
                    }
                  });
                  if (data.code === 0) {
                    console.log(123)
                    this.tableData = data.data;
                    this.page.total = data.rdPage.total;
                   
                  } else {
                    // this.$message({
                    //   type: "error",
                    //   message: data.msg
                    // });
                  }
                } catch (e) {
                  // this.$message({
                  //   type: "error",
                  //   message: "接口报错"
                  // });
                }
             },
            
             //商品分类接口
             async categoryList() {
                try {
                  let { data } = await this.$post({
                    api: "/show/leftmenu",
                  });
                  if (data.code === 0) { 
                    this.category.push({
                      value:data.data[0].id,
                      label:data.data[0].name
                    })
                    // this.goodsKindSecond = data.data[0].attrKeyList;
      
                    
                    // this.tableData = data.data;
                    // this.page.total = data.rdPage.total;
                    // console.log(data)
                    // this.rawList = data.data;
                  } else {
                    // this.$message({
                    //   type: "error",
                    //   message: data.msg
                    // });
                  }
                } catch (e) {
                  // this.$message({
                  //   type: "error",
                  //   message: "接口报错"
                  // });
                }
             },
             async categoryid(id) {
                try {
                  let { data } = await this.$post({
                    api: "/show/propertyInfo",
                    data:{
                      id:id
                    }
                  });
                  if (data.code === 0) {
                   
                   
                    this.goodsKindSecond = data.data.attrKeyList;
                  } else {
                    // this.$message({
                    //   type: "error",
                    //   message: data.msg
                    // });
                  }
                } catch (e) {
                  // this.$message({
                  //   type: "error",
                  //   message: "接口报错"
                  // });
                }
             },
             //仓库
             async area() {
                  try {
                    let { data } = await this.$post({
                      api: "/cellar/get/getStoreSelect"
                      
                    });
                    if (data.code === 0) {
                      this.selectedOptions = data.data;
                    
                    } else {
                      this.$message({
                        type: "error",
                        message: data.msg
                      });
                    }
                  } catch (e) {
                    // this.$message({
                    //   type: "error",
                    //   message: "接口报错"
                    // });
                  }
               },
               async skuinfoById(id) {
                  try {
                    let { data } = await this.$post({
                      api: "/show/skuinfo",
                      data:{
                        skuNo:id
                      }
                    });
                    if (data.code === 0) {
                      console.log(data)
                      this.goodsCates.tableData = data.data
                      // this.selectedOptions = data.data;
                    
                    } else {
                      this.$message({
                        type: "error",
                        message: data.msg
                      });
                    }
                  } catch (e) {
                    // this.$message({
                    //   type: "error",
                    //   message: "接口报错"
                    // });
                  }
               },
               //导出
           async goodsexcel() {
            try {
              let { data } = await this.$post({
                api: "/import/factorypcs",
                data:{
                  // current:this.page.current,
                  // pageSize:this.page.pageSize,
                  startTime:this.queryData.startTime,
                  endTime:this.queryData.endTime,
                  goodsId:this.queryData.goodsId,
                  status:0,
                  goodsKindSecond:this.queryData.goodsKindSecond
                }
              });
              if (data.code === 0) {
                let urlstr = url+data.data.replace('static/','');
                window.location.href=urlstr;
              this.$message({
                type: "success",
                message: data.msg
              });
              console.log(urlstr)
              } else {
                this.$message({
                  type: "error",
                  message: data.msg
                });
              }
            } catch (e) {
              this.$message({
                type: "error",
                message: "接口报错"
              });
            }
         },
             changecatey(id){
              this.categoryid(id)
               console.log(id)
             },
             //全选
             handleSelectionChange(val){
               console.log(val)
             },
            //查询
            query() {
              this.tableList();
             },
            //导出
            exportData(){
              this.$confirm("确认将导出记录，您确定要导出吗?", "系统提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning"
            }).then(() => {
              this.goodsexcel();
              
            }).catch(() => {
              this.$message({
                type: "info",
                message: "已取消导出"
              });
            });
            },
            sukData(row){
              this.skuinfoById(row.skuNo)
              this.goodsCates.show = true;
            },
            //冻结
            frozen(row){
              this.$router.push('/cellarfrozenStock')
            },
            //酒藏
            sales(){
              this.$router.push('/storageofWine')
            },
            //入库
            Warehousing(row){
              this.$router.push('/cellarIn/'+row.skuNo)
            },
            //出库
            outTreasury(row){
              this.$router.push('/cellerOut/'+row.skuNo)
              // this.$router.push('/commonCellar/'+this.$route.meta.ptype)
            },
            //确定录入
            okentry(){
              this.$router.push('/goodsEntry/detail')
            },
            canceloffAll() {
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            canceloffOne(id) {
              this.$confirm("取消将删除记录，您确定要删除吗?", "系统提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
              }).then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!"
                });
              }).catch(() => {
                this.$message({
                  type: "info",
                  message: "已取消删除"
                });
              });
            },
            handleCurrentChange(val) {
                this.page.current = val;
                this.tableList()
              console.log(val);
            },
            showCateDialog() {
              this.goodsCates.show = true;
            },
            //时间选择器
            changeTime(arr){
              console.log(arr)
              this.queryData.startTime = arr[0];
              this.queryData.endTime = arr[1];
            }
          }
        };
      </script>
      
      <style lang="scss" scoped>
        .query {
          overflow: hidden;
          border-bottom: 1px solid #eeeeee;
          &-item {
            float: left;
            margin: 15px 20px;
          }
          .el-input {
            width: 150px;
          }
          .el-button {
            margin: 0 15px;
            &:last-child {
              margin-right: 0;
            }
          }
        }
      
        .entry-info {
          padding: 15px 20px;
          border-bottom: 1px solid #eeeeee;
        }
      
        .goods-category {
          line-height: 32px;
          span {
            color: #0033ff;
            text-decoration: underline;
            cursor: pointer;
          }
        }
      
        .goods-count {
          line-height: 32px;
        }
      
        .goods-id {
          display: flex;
          justify-content: space-between;
          padding: 0 40px;
          border-left: 1px solid #000;
          border-right: 1px solid #000;
          span {
            position: relative;
            display: inline-block;
            padding: 8px 15px;
            border: 1px solid #333;
            &:after {
              content: "";
              position: absolute;
              top: -6px;
              left: -6px;
              width: 100%;
              height: 100%;
              padding: 6px;
              border: 1px solid #333;
            }
          }
        }
      
        .wrapper {
          padding: 10px 15px;
        }
      
        .canceloff-btn {
          color: #0033ff;
          cursor: pointer;
        }
      </style>